import React, {FC} from "react";
import Link from "next/link";

export interface WaterfallItemProps {
    id: string;
    src: string;
    onClick?: (item: WaterfallItemProps, event: React.MouseEvent<HTMLDivElement>) => void;
}

export const WaterfallItem: FC<WaterfallItemProps> = function (props) {

    function handleItemClick(event: React.MouseEvent<HTMLDivElement>) {
        if (props.onClick) {
            props.onClick(props, event);
        }
    }

    return (
        <div className={"relative w-[10.599%] min-w-[100px]"} onClick={handleItemClick}>
            {props.src && (
                <div className={"rounded-lg overflow-hidden"}>
                    <img src={props.src} alt={""} className={"w-full h-full"}/>
                </div>
            )}
            <Link href={`/pins/${props.id}`} scroll={false} prefetch={false}
                  className={"absolute top-0 w-full h-full rounded-lg hover:bg-black/35 hover:backdrop-blur-[1px]"}/>
        </div>
    )
}

export default WaterfallItem;